<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<title>domDiff</title>
<style>
        .item-header{
          font-size:20px;
          color:green
        }
      </style>
<body>
    <div id="app">

    </div>
    <script src="./vdom.js"></script>
    <script>
        //旧的VNode
        const preNode = createElement('div', null, [
            createElement('p', { key: 'a', style: { color: 'blue' } }, '节点1'),
            createElement('p', { key: 'b', '@click': () => { alert('呵呵') } }, '节点2'),
            createElement('p', { key: 'c' }, '节点3'),
            createElement('p', { key: 'd' }, '节点4')
        ])
        //console.log(preNode)
        render(preNode, document.getElementById("app"))

        //新的VNode
        const nextNode = createElement('div', null, [
            createElement('p', { key: 'd' }, '节点4'),
            createElement('p', { key: 'a', style: { color: 'red' } }, '节点1'),
            createElement('p', { key: 'b', '@click': () => { alert('哈哈') } }, '节点2'),
            createElement('p', { key: 'f' }, '节点6'),
            createElement('p', { key: 'e', class: "item-header" }, '节点5'),
        ])
        setTimeout(()=>{
            render(nextNode,document.getElementById("app"))
        },3000)
    </script>
</body>

</html>